---
title: Input
---

# Input

Form input component

```js
import { Input } from 'theme-ui'
```

```js live=true
<Input defaultValue="Hello" />
```

## Variants

Input variants can be defined in `theme.forms` and the component uses the
`theme.forms.input` variant by default.

## Autocomplete styles

Background color of autofilled inputs defaults to `background`, and can be
changed by setting `autofillBackgroundColor` prop.

```js live=true
<Input autoComplete="given-name" autofillBackgroundColor="highlight" />
```
